<template>
  <div>
    <Modal v-model="showModal"
           :footer-hide="true"
           :closable="true"
           title="添加客房类型"
    >
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="80">
        <FormItem label="类型名称" prop="roomCode">
          <Input v-model="formValidate.roomCode" placeholder="房间号"></Input>
        </FormItem>
        <FormItem label="日租费用" prop="dailyRent">
          <Input v-model="formValidate.dailyRent" placeholder="日租费用"></Input>
        </FormItem>
        <FormItem label="时租费用" prop="hourlyRate">
          <Input v-model="formValidate.hourlyRate" placeholder="时租费用"></Input>
        </FormItem>
        <FormItem label="基础设施" prop="roomType">

        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "AddRoomType",
  data() {
    return {
      formValidate: {
        typeName: '',
        baseDailyRent: '',
        baseHourlyRate: '',
        hotelFacilitiesList: [],
      },
      ruleValidate: {
        typeName: [
          {required: true, message: 'The name cannot be empty', trigger: 'blur'}
        ],
        baseDailyRent: [
          {required: true, message: 'Mailbox cannot be empty', trigger: 'blur'},
        ],
        baseHourlyRate: [
          {required: true, message: 'Please select the city', trigger: 'change'}
        ]
      },
      showModal:false
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    closeModal(){
      this.showModal = false;
    },
    openModal(){
      this.showModal = true;
    },
  }
}
</script>

<style scoped>

</style>
